<!-- 关系表 -->
<template>
  <main class="page-main">
    <div class="page-body">
    <!-- 查询条件-->

    <a-form layout="inline" :model="queryData" autocomplete="off">
    <a-form-item label='关系类型：KonwsDocument 问答和文档关系' name='type'>
       <a-input v-model:value='queryData.type' />
    </a-form-item>
    <a-form-item label='源ID' name='sourceId'>
       <a-input v-model:value='queryData.sourceId' />
    </a-form-item>
    <a-form-item label='目标ID' name='targetId'>
       <a-input v-model:value='queryData.targetId' />
    </a-form-item>
    </a-form>
    <div class="margin-top-10">
        <!-- 操作按钮 -->
        <a-row>
          <a-col :span="12">
            <a-button type="default" class="button-add" @click="handleAddMode">
              <template #icon>
                <icon icon-name="PlusOutlined"></icon>
              </template>
              添加
            </a-button>
          </a-col>
          <a-col :span="12" class="text-right">
            <a-space size="large">
              <a-button type="default" @click="handleCleanQueryData">
                <template #icon>
                  <icon icon-name="RedoOutlined"></icon>
                </template>
                重置
              </a-button>
              <a-button type="primary" @click="handleQueryList">
                <template #icon>
                  <icon icon-name="SearchOutlined"></icon>
                </template>
                查询</a-button>
              <a-button type="dashed" @click="handleExport">
                <template #icon>
                  <icon icon-name="DownloadOutlined"></icon>
                </template>
                导出
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>

      <!-- 表格 -->
      <div class="margin-top-10">
        <a-table :columns="columns" :data-source="dataList" :pagination="false" rowKey="id">
          <template #bodyCell="{ column, record  }">
            <template v-if="column.key === 'actionColumn'">
              <a-flex class="width" justify="space-around">
                <a-tooltip title="修改">
                  <a-button type="text" size="small" class="button-edit" @click="handleEditMode(record.id)">
                    <template #icon>
                      <icon icon-name="FormOutlined"></icon>
                    </template>
                  </a-button>
                </a-tooltip>

                <a-tooltip title="删除">
                  <a-button type="text" size="small" class="button-delete"  @click="handleDeleteMode(record.id)">
                    <template #icon>
                      <icon icon-name="DeleteOutlined"></icon>
                    </template>
                  </a-button>
                </a-tooltip>
              </a-flex>
            </template>
          </template>
        </a-table>

        <!-- 分页 -->
        <div class="float-right margin-10-20">
          <a-pagination v-model:current="queryData.pageNo" :total="queryData.count" show-size-changer
                        :page-size-options="pageSizeOptions"
                        @showSizeChange="handleChange" @change="handleChange"/>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <!-- 新增、编辑的表单-->
    <a-drawer v-model:open="mode.edit" :title="currentId?'修改关系表':'添加关系表'" size="large">
      <Form :key="new Date().getTime()" :dataId="currentId" @close="handleCancel" @successed="handleQueryList"/>
    </a-drawer>

    <!-- 删除 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除关系表吗？删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>

  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/BizRefApi";
import Form from "./form.vue"
import Icon from "@/components/Icon.vue"

import { notification } from 'ant-design-vue';

export default {
  components: {
    Icon,
    Form
  },
  data() {
    return {
      columns: [
        {title: '', dataIndex:'id', key:'id'},
        {title: '关系类型：KonwsDocument 问答和文档关系', dataIndex:'type', key:'type'},
        {title: '源ID', dataIndex:'sourceId', key:'sourceId'},
        {title: '目标ID', dataIndex:'targetId', key:'targetId'},
        {title: '创建人ID', dataIndex:'createId', key:'createId'},
        {title: '创建人名称', dataIndex:'createName', key:'createName'},
        {title: '创建时间', dataIndex:'createTime', key:'createTime'},
        {title: '修改人ID', dataIndex:'updateId', key:'updateId'},
        {title: '修改人名称', dataIndex:'updateName', key:'updateName'},
        {title: '修改时间', dataIndex:'updateTime', key:'updateTime'},
        {title: '操作', key: 'actionColumn', width: 100}
      ],
      pageSizeOptions:['10', '20', '50', '100'],
      //数据列表
      dataList: [],
      //当前操作的数据Id
      currentId: 0,
      //查询数据
      queryData: {
        count: 0,
        pageNo: 1,
        pageSize: 10
      },
      //模式
      mode: {
        //编辑模式
        edit: false,
        //删除模式
        delete: false
      }
    }
  },
  methods: {
    /**
     * 查询列表
     */
    handleQueryList() {
      api.queryList(this.queryData).then((res) => {
        //请求成功
        if (apiUtil.isSuccessed(res)) {
          if (res.data.dataList) {
            const data = res.data;
            this.dataList = data.dataList;
            this.queryData.count = data.count;
            this.queryData.pageNo = data.pageNo;
            this.queryData.pageSize = data.pageSize;
          }
        } else {
          //请求失败
          notification.error({
            message: "查询失败",
            description: res.message
          });
        }
      })
    },

    /**
     * 删除数据
     */
    handleDelete() {
      api.deleteById(this.currentId).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          notification.success({
            message: "删除成功",
            description: "已删除"
          });
          this.mode.delete = false;
          this.handleQueryList();
        } else {
          //请求失败
          notification.error({
            message: "删除失败",
            description: res.message
          });
        }
      });
    },
    /**
     * 进入新增模式
     */
    handleAddMode() {
      this.currentId = null;
      this.mode.edit = true;
    },
    /**
     * 进入编辑模式
     * @param id 要编辑的数据ID
     */
    handleEditMode(id) {
      this.currentId = id;
      this.mode.edit = true;
    },
    /**
     * 进入删除模式
     * @param index 行号
     * @param row 要删除的数据
     */
    handleDeleteMode(id) {
      this.currentId = id;
      this.mode.delete = true;
    },
    /**
     * 取消编辑/删除操作
     */
    handleCancel() {
      this.mode.edit = false;
      this.mode.delete = false;
      this.currentId = null;
    },
    /**
     * 分页大小改变
     * @param val
     */
    handleChange(current,size) {
      this.queryData.pageSize = size;
      this.queryData.pageNo = current;
      this.handleQueryList();
    },

    /**
     * 重置查询条件
     */
    handleCleanQueryData() {
      this.queryData = {
        count: this.queryData.count,
        pageNo: this.queryData.pageNo,
        pageSize: this.queryData.pageSize
      }
      this.handleQueryList();
    },
    /**
     * 导出数据
     */
    handleExport() {
      api.exportList(this.queryData);
    }
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.handleQueryList();
  }
}
</script>
<style scoped>

</style>